<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            //定义方法,判断当前是否登录
            var user = JSON.parse(sessionStorage.getItem("user"));

            //点赞按钮
            $("#likeBtn").click(function () {
                //如果没有用户则必须跳转到登录页面,只有登录用户才可以点赞
                if (user==null) {
                    window.location.href = 'login.html';
                }
            })

            //收藏按钮
            $("#collectBtn").click(function () {
                //登录之后才可以收藏
                if (user == null){
                    window.location.href = 'login.html';
                }
            })
            //获取当前攻略id
            var params = getParams();
            //通过登录的用户id和页面用户的id
            if (user) {
                //查询当前用户是否有点赞当前游记
                $.ajax({
                    //async:异步
                    async: false,
                    url: "/strategyLikes",
                    method: "get",
                    data: {
                        strategyId: params.strategyId,
                        userId: user.id
                    },
                    success: function (data) {
                        if (data.success) {
                            $("#likeBtn").css("color", "red");
                        } else {
                            $("#likeBtn").css("color", "rgb(33,37,41)");
                        }
                    }
                });
                //点赞
                //添加点击事件
                $("#likeBtn").click(function () {
                    $.post('/strategyLikes', {'strategyId': params.strategyId, 'userId':user.id}, function (data) {
                        if (data.success) {
                            $("#likeBtn").css("color", "red");
                            //取消点赞按钮数字加一
                            $("#likeCount").html(parseInt($("#likeCount").html())+1);
                            $(document).dialog({
                                type: 'notice',
                                infoText:'点赞成功',
                                autoClose:800,
                                position:'center'
                            })
                        } else {
                            $("#likeBtn").css("color", "rgb(33,37,41)");
                            //取消点赞按钮数字减一
                            $("#likeCount").html(parseInt($("#likeCount").html())-1);
                            $(document).dialog({
                                type: 'notice',
                                infoText:'取消点赞',
                                autoClose:800,
                                position:'center'
                            })
                        }
                    })

                })

                //查询当前用户是否有收藏当前游记
                $.ajax({
                    //async:异步
                    async: false,
                    url: "/myCollections/strategy",
                    method: "get",
                    data: {
                        strategyId: params.strategyId,
                        userId: user.id
                    },
                    success: function (data) {
                        if (data.success) {
                            $("#collectBtn").css("color", "red");
                        } else {
                            $("#collectBtn").css("color", "rgb(33,37,41)");
                        }
                    }
                });
                //点赞
                //添加点击事件
                $("#collectBtn").click(function () {
                    $.post('/myCollections/strategy', {'strategyId': params.strategyId, 'userId':user.id}, function (data) {
                        if (data.success) {
                            $("#collectBtn").css("color", "red");
                            //取消点赞按钮数字加一
                            $("#collectCount").html(parseInt($("#collectCount").html())+1);
                            $(document).dialog({
                                type: 'notice',
                                infoText:'点赞成功',
                                autoClose:800,
                                position:'center'
                            })
                        } else {
                            $("#collectBtn").css("color", "rgb(33,37,41)");
                            //取消点赞按钮数字减一
                            $("#collectCount").html(parseInt($("#collectCount").html())-1);
                            $(document).dialog({
                                type: 'notice',
                                infoText:'取消点赞',
                                autoClose:800,
                                position:'center'
                            })
                        }
                    })

                })
            }
            if (params.strategyId){
               //获取大攻略对象
               $.get('/strategies/'+params.strategyId,function (data) {
                   $('.title').html(data.title);
                   $('#likeCount').html(data.likeCount);
                   $('#collectCount').html(data.collectCount);
               });


               //获取攻略分类集合
               $.get('/strategies/'+params.strategyId+'/catalogs',function (data) {
                   var index = 1;
                   $('.catalogs').renderValues({list:data},{
                       getName:function (item,value) {
                           $(item).html(index+++'/'+value);
                       },
                       getAddress:getAddress
                   });
               });
               //查询该攻略下的所有 关联的 游记
               $.get('/strategies/' + params.strategyId + '/travels', function (data) {
                   $('.hot').renderValues({list: data},{
                       //item为toMyeditTravel所在的那个标签  value为 render-key
                       getHref: function (item,value){
                           var href = $(item).data("href");
                           $(item).attr('href',href+value);
                       }
                   })
               })
           }

            //点评按钮点击事件
            $("#commentBtn").click(function () {
                window.parent.location.href = "/mine/addComment.html?strategyId=" + params.strategyId
            })

            //点击骡友点评按钮,评论数据回显
            $("#pills-comment-tab").click(function(){
                $.get("/strategycomment/"+params.strategyId+"/list",function (data) {
                    console.log(data);
                    $("#comment").renderValues(data,
                        {getHref:function (item, value) {
                            var href = $(item).attr("href");
                            $(item).attr("href",href+value);
                        },
                        //图片回显
                        getImage:function (item, value) {
                        //把图片的地址切分
                            if(value){
                            var url = value.split(";");
                            //分割时多了一个,长度要减一
                            for (var i=0;i<url.length-1;i++) {
                                $(item).append("<li><img class='comment-img' src='"+url[i]+"'></img></li>")
                            }
                            }
                        },
                        //星级评价回显
                        getStar:function (item, value) {
                            var dark = 5 - value;
                            for (var i=0;i<value;i++){
                                $(item).append("<i class=\"fa fa-star\"></i>")
                            }
                            if(dark > 0){
                                for (var i=0;i<dark;i++){
                                    $(item).append("<i class=\"fa fa-star-o\"></i>")
                                }
                            }
                        },
                            //叠加评论按钮值绑定事件
                            getId: function (item, value) {
                                $(item).attr("data-commentid", value);
                            }
                        });


                    //叠加评论按钮点击事件
                    $(".commentdouble").click(function () {
                        //拿到绑定在按钮上的id
                        var id = $(this).data("commentid");
                        window.parent.location.href = "/mine/strategyComment.html?strategycommentId=" + id;
                    })
                    //图片点击效果
                    $(".comment-img img").click(function () {
                        $(document).dialog({
                            titleShow: false,
                            overlayClose: true,
                            content: '<div style="text-align: center;"><img width="100%" src="' + $(this).attr('src') + '"></div>'
                        });
                    });

                })
                //标签渲染
                $.get("/strategies/" + params.strategyId + "/tags", function (data) {
                    $("#tagTarget").renderValues({list: data})
                })

            })

        });
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" id="searchStrategies" placeholder="搜索旅行攻略">
            </div>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title">广州攻略</h5>
    <small><span>0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa fa-heart" id="collectBtn"><span id="collectCount"> </span> </i>
        <i class="fa fa-thumbs-up" id="likeBtn"><span id="likeCount"> </span></i>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="container hot">
            <h6>大家都在看</h6>
            <div render-loop="list">
                <a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref" >
                    <button class="btn" render-html="list.title"></button>
                </a>
            </div>
        </div>
        <div class="catalogs">
            <div render-loop="list">
                <div class="container detail">
                    <h6 render-key="list.name" render-fun="getName"></h6>
                    <div render-loop="list.details">
                        <a data-href="strategyDetails.html?id=" render-key="list.details.id" render-fun="getAddress">
                            <button class="btn" render-html="list.details.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div id="tagTarget">
            <div render-loop="list">
                <span render-html="list.name"></span>
            </div>
            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="rounded-circle"
                                 render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.user.nickName"></span></p>
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar">

                        </span>
                        <span class="comment-date" render-html="list.commendTime"></span>
                        <div class="comment-content">
                            <a href="mine/strategyComment.html?strategycommentId=" render-key="list.id" render-fun="getHref">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img" render-key="list.imgUrls" render-fun="getImage">
                        </ul>

                        <div class="d-flex icon">
                                <i  data-commentid render-key="list.id" render-fun="getId" class="fa  fa-commenting-o commentdouble" style="margin-right: 10px"> 评论 </i>
                                <i class="fa fa-thumbs-o-up" > <span >0</span> </i>
                        </div>

                    </div>
                </div>

                </div>
            </div>
        </div>

    </div>
</div>

<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>